<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品列表</span>
        <el-button
          style="float: right; margin-botton: 20px"
          type="primary"
          size="small"
          @click="addGoods"
          >添加商品</el-button
        >
      </div>
      <el-table
        :data="
          buyList.slice((currentPage - 1) * pageSize, pageSize * currentPage)
        "
        style="width: 100%"
      >
        <el-table-column prop="gid" label="编号" width="60px" />
        <el-table-column prop="username" label="发布人" width="70px" />
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="goodsCount" label="商品数量" width="80px" />
        <el-table-column prop="goodsPrice" label="商品单价" width="80px" />

        <el-table-column prop="goodsImg" label="商品图片" width="80px">
          <template slot-scope="scope">
            <el-popover placement="right" title="" trigger="hover">
              <img :src="scope.row.goodsImg" style="height: 400px" />
              <img
                slot="reference"
                :src="scope.row.goodsImg"
                min-width="70"
                height="70"
              />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="goodsDesc" label="商品介绍" />
        <el-table-column prop="shopName" label="店铺名称" width="150px" />
        <el-table-column prop="goodsCode" label="商品代码" />

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.gid)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="buyList.length"
      >
      </el-pagination>
    </el-card>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="buyForm"
      >
        <el-form-item label="发布人">
          <el-input v-model="buyForm.username"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="buyForm.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input v-model="buyForm.goodsCount"></el-input>
        </el-form-item>
        <el-form-item label="商品单价">
          <el-input v-model="buyForm.goodsPrice"></el-input>
        </el-form-item>
        <el-form-item label="缩略图">
          <el-input v-model="buyForm.goodsImg"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍">
          <el-input v-model="buyForm.goodsDesc"></el-input>
        </el-form-item>
        <el-form-item label="店铺名称">
          <el-input v-model="buyForm.shopName"></el-input>
        </el-form-item>
        <el-form-item label="商品代码">
          <el-input v-model="buyForm.goodsCode"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGoodsListAPI,
  deleteGoodsAPI,
  updateGoodsAPI,
  addGoodsAPI,
} from "@/api";

export default {
  name: "AdminGoodscontrol",

  data() {
    return {
      buyForm: {
        uid:parseInt(sessionStorage.getItem("uid")),
        gid: 0,
        username: "",
        goodsName: "",
        goodsCount: 0,
        goodsPrice: "",
        goodsImg: "",
        goodsDesc: "",
        shopName: "",
        goodsType: "",
        goodsCode: "",
      },
      buyList: [],
      dialogVisible: false,
      labelPosition: "right",
      dialogTitle: "",
      pageSize: 5,
      currentPage: 1,
      tableData: [],
      tableList: [],
      searchlist: [],
      inputText: "",
    };
  },

  mounted() {
    this.getAllGoods();
  },
  created() {},
  methods: {
    async getAllGoods() {
      const getRes = await getGoodsListAPI();
      this.buyList = getRes.data.data;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    handleEdit(row) {
      this.dialogVisible = true;
      this.dialogTitle = "商品编辑";
      this.buyForm.gid = row.gid;
      this.buyForm.username = row.username;
      this.buyForm.goodsName = row.goodsName;
      this.buyForm.goodsCount = row.goodsCount;
      this.buyForm.goodsPrice = row.goodsPrice;
      this.buyForm.goodsImg = row.goodsImg;
      this.buyForm.goodsDesc = row.goodsDesc;
      this.buyForm.shopName = row.shopName;
      this.buyForm.goodsCode = row.goodsCode;
    },
    addGoods() {
      this.dialogVisible = true;
      this.dialogTitle = "商品添加";
      this.buyForm.username = "";
      this.buyForm.goodsName = "";
      this.buyForm.goodsCount = "";
      this.buyForm.goodsPrice = "";
      this.buyForm.goodsImg = "";
      this.buyForm.goodsDesc = "";
      this.buyForm.shopName = "";
      this.buyForm.goodsCode = "";
    },
    async submit() {
      if (this.buyForm.gid > 0) {
        const updateGoodsRes = await updateGoodsAPI(this.buyForm);
        if (updateGoodsRes.data.statusCode === 200) {
          this.$message({
            message: "编辑信息成功",
            type: "success",
          });
          this.getAllGoods();
          this.dialogVisible = false;
        }
      } else {
        let data = new FormData();
        data.append("uid", this.buyForm.uid);
        data.append("gid", this.buyForm.gid);
        data.append("goodsName", this.buyForm.goodsName);
        data.append("goodsCount", this.buyForm.goodsCount);
        data.append("goodsType", this.buyForm.goodsType);
        data.append("goodsImg", this.buyForm.goodsImg);
        data.append("goodsPrice", this.buyForm.goodsPrice);
        data.append("goodsDesc", this.buyForm.goodsDesc);
        data.append("shopName", this.buyForm.shopName);
        data.append("goodsCode", this.buyForm.goodsCode);
        const addGoodsRes = await addGoodsAPI(data);
        if (addGoodsRes.data.statusCode === 200) {
          this.$message({
            message: addGoodsRes.data.message,
            type: "success",
          });
          this.getAllGoods();
          this.dialogVisible = false;
        }
      }
    },

    async handleDelete(gid) {
      await deleteGoodsAPI(gid);
      this.getAllGoods();
    },
  },
};
</script>

<style scoped></style>
